
<template>
  <div v-if="id==null">请选择审核题库好来此页面</div>
  <div v-else>
    
      <el-main class="jt-body--full">
      <el-row :gutter="10" type="flex">
				<!-- 左边导航信息 -->
			  <el-col :xs="10" :sm="7" :md="5" :lg="5" :xl="5">
          <div class="jt-card">
            <el-card class="jt-answer_card">
              <div class="jt-answer_card__header">
                <span></span>
                <div class="jt-answer_card__header__title">导航信息</div>
              </div>
              <div class="jt-answer_card__main">
                <div class="jt-answer_card__main-item" v-for="(item, index) in vo2.bigQuestions" :key="index">
                  <div class="jt-answer_card__main-item__title">
                    {{ item.sortNoBig }}，{{ item.typeName }}(共{{ item.total }}题，合计{{ item.scoretotal }}分)
                    <p>
                      <span>   
                        简单:{{ item.easyNum }}
                      </span>
                      <span>
                        普通:{{ item.commonNum }}
                      </span>
                      <span>
                        困难:{{ item.difficultNum }}
                      </span>
                    </p>
                  </div>
                  <div class="jt-answer_card__main-item__list">
                    <a 
                      v-for="(item2, index2) in item.smallQuestion" 
                      :key="index2" 
                      :class="item2.level === '简单' ? ['s4'] : (item2.level === '普通' ? ['s2'] : ['s5'])"
                    >
                      {{ item2.sortNoSmall }}
                    </a>
                  </div>
                  <div class="jt-answer_card__main-item__split"></div>
                </div>
              </div>
              <div class="jt-answer_card__footer">
                <span class="jt-answer_card__footer-icon s4"></span>
                <span class="jt-answer_card__footer-label">简单</span>
                <span class="jt-answer_card__footer-icon s2"></span>  
                <span class="jt-answer_card__footer-label">普通</span>
                <span class="jt-answer_card__footer-icon s5"></span>
                <span class="jt-answer_card__footer-label">困难</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <!-- 题目 -->
        <el-col :xs="11" :sm="14" :md="16" :lg="18" :xl="16">
          <div v-for="(item, index) in vo.bigQuestions" :key="index" class="jt-list4_3">
            <!-- 单选题 -->
            <div v-if="item.types.id == 0" class="jt-list4_3__main">
              <div class="jt-list4_3__main__title">
                {{ vo2.bigQuestions[index].sortNoBig }}，{{ vo2.bigQuestions[index].typeName }}(共{{ vo2.bigQuestions[index].total }}题，每小题{{ vo2.bigQuestions[index].scoretotal / vo2.bigQuestions[index].total }}分， 合计{{ vo2.bigQuestions[index].scoretotal }}分)
                <div class="jt-list4_3__main__title-info">
                  {{ vo2.bigQuestions[index].typeName }}难度分类:<span>简单：{{ vo2.bigQuestions[index].easyNum }}</span><span>普通：{{ vo2.bigQuestions[index].commonNum }}</span><span>较难：{{ vo2.bigQuestions[index].difficultNum }}</span>
                </div>
              </div>
              <div v-for="(item2, index2) in vo.bigQuestions[index].smallQuestions" :key="index2" class="jt-list4_3__main-item">
                <el-row>
                  <el-col :sm="18" :md="20" :lg="22">
                    <div class="jt-list4_3__main__content">
                      <div class="jt-list4_3__main__content__header">
                        <span>{{ index2 + 1 }}.</span>
                        <span
                          >{{ item2.title }}</span
                        >
                      </div>
                      <div class="jt-list4_3__main__content__main">
                        <el-radio-group>
                          <el-radio v-for="(item3, index3) in item2.items" :key="index3"><span>{{ item3.sortNo }}.</span>{{ item3.option }}</el-radio>
                        </el-radio-group>
                        <div class="jt-list4_3__main__content__main-info">
                          <p>正确答案：<span v-for="(item4, index4) in item2.answer" :key="index4" class="s2">{{ item4 }}</span></p>
                          <p>
                            解释说明：<span>{{ item2.explain }}</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 多选题 -->
            <div v-if="item.types.id == 1" class="jt-list4_3__main">
              <div class="jt-list4_3__main__title">
                {{ vo2.bigQuestions[index].sortNoBig }}，{{ vo2.bigQuestions[index].typeName }}(共{{ vo2.bigQuestions[index].total }}题，每小题{{ vo2.bigQuestions[index].scoretotal / vo2.bigQuestions[index].total }}分， 合计{{ vo2.bigQuestions[index].scoretotal }}分)
                <div class="jt-list4_3__main__title-info">
                  {{ vo2.bigQuestions[index].typeName }}难度分类:<span>简单：{{ vo2.bigQuestions[index].easyNum }}</span><span>普通：{{ vo2.bigQuestions[index].commonNum }}</span><span>较难：{{ vo2.bigQuestions[index].difficultNum }}</span>
                </div>
              </div>
              <div v-for="(item2, index2) in vo.bigQuestions[index].smallQuestions" :key="index2" class="jt-list4_3__main-item">
                <el-row>
                  <el-col :sm="18" :md="20" :lg="22">
                    <div class="jt-list4_3__main__content">
                      <div class="jt-list4_3__main__content__header">
                        <span>{{ index2 + 1 }}.</span>
                        <span
                          >{{ item2.title }}</span
                        >
                      </div>
                      <div class="jt-list4_3__main__content__main">
                        <el-radio-group>
                          <el-radio v-for="(item3, index3) in item2.items" :key="index3"><span>{{ item3.sortNo }}.</span>{{ item3.option }}</el-radio>
                        </el-radio-group>
                        <div class="jt-list4_3__main__content__main-info">
                          <p>正确答案：<span v-for="(item4, index4) in item2.answer" :key="index4" class="s2">{{ item4 }}</span></p>
                          <p>
                            解释说明：<span>{{ item2.explain }}</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 判断题 -->
            <div v-if="item.types.id == 2" class="jt-list4_3__main">
              <div class="jt-list4_3__main__title">
                {{ vo2.bigQuestions[index].sortNoBig }}，{{ vo2.bigQuestions[index].typeName }}(共{{ vo2.bigQuestions[index].total }}题，每小题{{ vo2.bigQuestions[index].scoretotal / vo2.bigQuestions[index].total }}分， 合计{{ vo2.bigQuestions[index].scoretotal }}分)
                <div class="jt-list4_3__main__title-info">
                  {{ vo2.bigQuestions[index].typeName }}难度分类:<span>简单：{{ vo2.bigQuestions[index].easyNum }}</span><span>普通：{{ vo2.bigQuestions[index].commonNum }}</span><span>较难：{{ vo2.bigQuestions[index].difficultNum }}</span>
                </div>
              </div>
              <div v-for="(item2, index2) in vo.bigQuestions[index].smallQuestions" :key="index2" class="jt-list4_3__main-item">
                <el-row>
                  <el-col :sm="18" :md="20" :lg="22">
                    <div class="jt-list4_3__main__content">
                      <div class="jt-list4_3__main__content__header">
                        <span>{{ index2 + 1 }}.</span>
                        <span
                          >{{ item2.title }}</span
                        >
                      </div>
                      <div class="jt-list4_3__main__content__main">
                        <el-radio-group size="medium">
                          <el-radio v-for="(item3, index3) in item2.items" :key="index3" :label="item.sortNo">
                            <span>
                              {{ item3.sortNo }}.{{ item3.option }}
                            </span>
                          </el-radio>
                        </el-radio-group>
                        <div class="jt-list4_3__main__content__main-info">                          
                          <p>正确答案：<span v-for="(item4, index4) in item2.answer" :key="index4" class="s2">{{ item4 }}</span></p>
                          <p>
                            解释说明：<span>{{ item2.explain }}</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 填空题 -->
            <div v-if="item.types.id == 3" class="jt-list4_3__main">
              <div class="jt-list4_3__main__title">
                {{ vo2.bigQuestions[index].sortNoBig }}，{{ vo2.bigQuestions[index].typeName }}(共{{ vo2.bigQuestions[index].total }}题，每小题{{ vo2.bigQuestions[index].scoretotal / vo2.bigQuestions[index].total }}分， 合计{{ vo2.bigQuestions[index].scoretotal }}分)
                <div class="jt-list4_3__main__title-info">
                  {{ vo2.bigQuestions[index].typeName }}难度分类:<span>简单：{{ vo2.bigQuestions[index].easyNum }}</span><span>普通：{{ vo2.bigQuestions[index].commonNum }}</span><span>较难：{{ vo2.bigQuestions[index].difficultNum }}</span>
                </div>
              </div>
              <div v-for="(item2, index2) in vo.bigQuestions[index].smallQuestions" :key="index2" class="jt-list4_3__main-item">
                <el-col :sm="18" :md="20" :lg="22">
                  <div class="jt-list4_3__main__content">
                    <div class="jt-list4_3__main__content__header">
                        <span>{{ index2 + 1 }}.</span>
                        <span
                          >{{ item2.title }}</span
                        >
                      </div>
                    <div class="jt-list4_3__main__content__main">
                      <div class="jt-list4_3__main__content__main-info">
												<p>正确答案：<span class="s2" v-for="(item3, index3) in item2.items" :key="index3">{{ item3.sortNo }}.{{ item3.option }} </span></p>
                        <p>解释说明：<span>{{ item2.explain }}</span></p>
                      </div>
                    </div>
                  </div>
                </el-col>
              </div>
            </div>
            <!-- 简答题 -->
            <div v-if="item.types.id == 4" class="jt-list4_3__main">
              <div class="jt-list4_3__main__title">
                {{ vo2.bigQuestions[index].sortNoBig }}，{{ vo2.bigQuestions[index].typeName }}(共{{ vo2.bigQuestions[index].total }}题， 合计{{ vo2.bigQuestions[index].scoretotal }}分)
                <div class="jt-list4_3__main__title-info">
                  {{ vo2.bigQuestions[index].typeName }}难度分类:<span>简单：{{ vo2.bigQuestions[index].easyNum }}</span><span>普通：{{ vo2.bigQuestions[index].commonNum }}</span><span>较难：{{ vo2.bigQuestions[index].difficultNum }}</span>
                </div>
              </div>
              <div v-for="(item2, index2) in vo.bigQuestions[index].smallQuestions" :key="index2" class="jt-list4_3__main-item">
                <el-col :sm="18" :md="20" :lg="22">
                  <div class="jt-list4_3__main__content">
                    <div class="jt-list4_3__main__content__header">
                      <span>{{ index2 + 1 }}.</span>
                      <span>{{ item2.title }}</span>
                      <span>（本题{{ vo2.bigQuestions[index].smallQuestion[index2].score }}分）</span>
                    </div>
                    <div class="jt-list4_3__main__content__main">
                      <div class="jt-list4_3__main__content__main-info">
												<p>正确答案：<span class="s2">{{ item2.explain }}</span></p>
                      </div>
                    </div>
                  </div>
                </el-col>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 详情信息 -->
        <el-col :xs="5" :sm="3" :md="3" :lg="3" :xl="2">
          <div class="jt-time_progress_2">
            <div class="jt-time_progress_2__content">
              <ul>
                <li>
                  <div class="jt-time_progress_2__content-label">课程类型</div>
                  <div class="jt-time_progress_2__content-data">{{ vo2.courseType }}</div>
                </li>
                <li>
                  <div class="jt-time_progress_2__content-label">试卷类型</div>
                  <div class="jt-time_progress_2__content-data">{{ vo2.typeName }}</div>
                </li>
                <li>
                  <div class="jt-time_progress_2__content-label">试卷总分</div>
                  <div class="jt-time_progress_2__content-data">{{ vo2.scoreTotal }}</div>
                </li>
                <li>
                  <div class="jt-time_progress_2__content-label">考试时长</div>
                  <div class="jt-time_progress_2__content-data">{{ vo2.timeHours }}</div>
                </li>
              </ul>
            </div>
            <div class="jt-time_progress_2__opt">
              <div>
              <el-button type="primary" @click="changeOperationGroup('pass')">通过</el-button>
              <el-button @click="open()">不通过</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 置顶 -->
        <el-backtop :visibility-height="180">
          <div>
            <i class="el-icon-top"></i>
          </div>
        </el-backtop>
      </el-row>
    </el-main>
  </div>
</template>
<script>
export default {
  watch: {
    "$route.query.id": {
      immediate: true, // 一开始的数据也要当做一种变化
      handler(val, old) {
        this.id = val;
        this.init();
      },
    },
  },
  data() {
    return {
      id: null,
    };
  },
  methods: {
    init() {
      if (this.id != null) {
        this.$http({
          url: this.$http.adornUrl("/tiku/paper/gettemplates/" + this.id),
          method: "get",
        }).then(({ data }) => {
          console.log(data);
        });
      }
    },
  },
};
</script>
